<template>
	<div class="page-min">
		<el-card class="box-card">
			<el-button type="primary" @click="dialogFormVisible =true">新增用户</el-button>
			<div style="height: 10px;"></div>
			<el-table :data="tableData" border max-height="600">
				<el-table-column label="序号" width="100" prop="userId">
				</el-table-column>
				<el-table-column prop="nickName" label="用户姓名">
				</el-table-column>
				<el-table-column prop="userName" label="用户账户">
				</el-table-column>
				<el-table-column prop="phonenumber" label="用户电话">
				</el-table-column>
				<el-table-column prop="remark" label="角色">
				</el-table-column>
				<el-table-column prop="status" label="状态">
					<template slot-scope="scope">
						<span style="margin-left: 10px">{{ scope.row.status==0?'正常':'停用' }}</span>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="300" fixed="right">
					<template slot-scope="scope">
						<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">详情</el-button>
						<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
						<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除
						</el-button>
						<el-button size="mini" type="primary" @click="handleDelete(scope.$index, scope.row)">重置
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div style="height: 10px;"></div>
		</el-card>
		<!-- 新增 -->
		<el-dialog :title="title" :visible.sync="dialogFormVisible">
			<el-form :model="form" :rules="rules" ref="form">
				<el-form-item label="用户姓名" :label-width="formLabelWidth" prop="nickName">
					<el-input v-model="form.nickName" autocomplete="off" :disabled="disabled"></el-input>
				</el-form-item>
				<el-form-item label="用户账户" :label-width="formLabelWidth" prop="userName">
					<el-input v-model="form.userName" autocomplete="off" :disabled="disabled"></el-input>
				</el-form-item>
				<el-form-item label="用户电话" :label-width="formLabelWidth" prop="phonenumber">
					<el-input v-model="form.phonenumber" autocomplete="off" :disabled="disabled">
					</el-input>
				</el-form-item>
				<el-form-item label="角色" :label-width="formLabelWidth" prop="remark">
					<!-- 	<el-input v-model="form.remark" autocomplete="off" :disabled="disabled">
					</el-input> -->
					<el-select v-model="form.remark" placeholder="请选择">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="密码" prop="password" :label-width="formLabelWidth">
					<el-input type="password" v-model="form.password" autocomplete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="close">取 消</el-button>
				<el-button type="primary" @click="submitForm('form',)">保存</el-button>
			</div>
		</el-dialog>
		<!-- 查看 -->
		<el-dialog title="" :visible.sync="dialogFormVisibleHandle">
			<el-form :model="dataForm">
				<el-form-item label="企业名称" :label-width="formLabelWidth" prop="enterpriseName">
					<el-input v-model="dataForm.enterpriseName" autocomplete="off" :disabled="true"></el-input>
				</el-form-item>
				<el-form-item label="联系人" :label-width="formLabelWidth" prop="contacts">
					<el-input v-model="dataForm.contacts" autocomplete="off" :disabled="true"></el-input>
				</el-form-item>
				<el-form-item label="职务" :label-width="formLabelWidth" prop="position">
					<el-input v-model="dataForm.position" autocomplete="off" :disabled="true">
					</el-input>
				</el-form-item>
				<el-form-item label="开户行" :label-width="formLabelWidth" prop="bankName">
					<el-input v-model="dataForm.bankName" autocomplete="off" :disabled="true">
					</el-input>
				</el-form-item>
				<el-form-item label="支行名称" :label-width="formLabelWidth" prop="bankBranch">
					<el-input v-model="dataForm.bankBranch" autocomplete="off" :disabled="true">
					</el-input>
				</el-form-item>
				<el-form-item label="对公账户" :label-width="formLabelWidth" prop="corporateAccount">
					<el-input v-model="dataForm.corporateAccount" autocomplete="off" :disabled="true">
					</el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisibleHandle = false">取 消</el-button>
				<el-button type="primary" @click="dialogFormVisibleHandle = false">确定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {
		systemUserList,
		systemUserNew,
		systemUserPut,
		systemUserGet,
		systemUserDelete,
		systemRoleOptionselect
	} from '../../api/systemUser.js'
	export default {
		components: {},
		data() {
			var validatePhone = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请填写手机号码'));
				} else {
					if (!/^1[3-9]\d{9}$/.test(value)) {
						callback(new Error('手机格式错误'));
					}
					callback();
				}
			};
			var validatePass = function(rule, value, callback) {
			  if (value === '') {
			    callback(new Error('请填写密码'))
			  } else if (!/^(?![A-Za-z0-9]+$)(?![a-z0-9\W]+$)(?![A-Za-z\W]+$)(?![A-Z0-9\W]+$)[a-zA-Z0-9\W]{6,10}$/.test(value)) {
			    callback(new Error('必须包含大小写字母和数字特殊字符的组合6-10位'))
			  } else {
			    callback()
			  }
			}
			var validatorUser = function(rule, value, callback) {
			  if (value === '') {
			    callback(new Error('请填写用户账户'))
			  } else if (!/^[a-zA-Z][a-zA-Z0-9_]{4,8}$/.test(value)) {
			    callback(new Error('必须包含大小写数字字母的组合4-8位'))
			  } else {
			    callback()
			  }
			}
			return {
				options: [],
				dialogFormVisibleHandle: false,
				title: '新增考核系数',
				btnName: '保存',
				disabled: false,
				typePop: 1,
				dialogTableVisible: false,
				dialogFormVisible: false,
				form: {
					nickName: '',
					userName: '',
					phonenumber: '',
					remark: '',
					password: '',
				},
				dataForm: {},
				valuePage: false,
				rules: {
					nickName: [{
						required: true,
						message: '请填写用户姓名',
						trigger: 'blur'
					}],
					userName: [{
						required: true,
						validator: validatorUser,
						trigger: 'blur'
					}],
					phonenumber: [{
						required: true,
						validator: validatePhone,
						trigger: 'blur'
					}],
					remark: [{
						required: true,
						message: '请填写用户角色',
						trigger: 'blur'
					}],
					password: [{
						required: true,
						validator: validatePass, 
						trigger: 'blur'
					}],

				},
				formLabelWidth: '120px',
				tableData: []
			}
		},
		created() {
			this.systemUserListPost()
			this.systemRoleOptionselectGet()
		},
		methods: {
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						if (this.typePop == 1) {
							this.systemUserNewPost(this.form)
						} else if (this.typePop == 2) {
							this.systemUserPut()
						}
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			close() {
				this.dialogFormVisible = false
				this.form.enterpriseName = ''
				this.form.contacts = ''
				this.form.position = ''
				this.form.bankName = ''
				this.form.bankBranch = ''
				this.form.corporateAccount = ''
			},
			//角色列表
			systemRoleOptionselectGet() {
				systemRoleOptionselect().then(res => {
					let list = res.data
					let newList = []
					list.map(item => {
						newList.push({
							value: item.roleName,
							label: item.roleName
						})
					})
					this.options = newList
				})
			},
			//查看
			handleClick(row) {
				this.dialogFormVisibleHandle = true
				systemUserGet(row.id).then(res => {
					this.dataForm = res.data
				})
			},
			//编辑
			editorClick(row) {
				this.title = '编辑考核系数'
				this.dialogFormVisible = true
				this.typePop = 2
				this.form.enterpriseName = row.enterpriseName
				this.form.contacts = row.contacts
				this.form.position = row.position
				this.form.bankName = row.bankName
				this.form.bankBranch = row.bankBranch
				this.form.corporateAccount = row.corporateAccount
				// {
				// 	enterpriseName: '',
				// 	contacts:'',
				// 	position: '',
				// 	bankName: '',
				// 	bankBranch: '',
				// 	corporateAccount: ''
				// },
				this.form.id = row.id
			},
			systemUserPut() {
				systemUserPut(this.form).then(res => {
					this.$message({
						type: 'success',
						message: res.msg
					});
					this.dialogFormVisible = false
					this.form.enterpriseName = ''
					this.form.contacts = ''
					this.form.position = ''
					this.form.bankName = ''
					this.form.bankBranch = ''
					this.form.corporateAccount = ''
					this.systemUserListPost()
				})
			},

			//删除
			deleteClick(row) {
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					systemUserDelete(row.id).then(res => {
						this.$message({
							type: 'success',
							message: res.msg
						});
						this.systemUserListPost()
					})
				}).catch(() => {
					// this.$message({
					// 	type: 'info',
					// 	message: '已取消删除'
					// });
				});
				console.log("row: ", row);

			},
			//删除
			businessEenterpriseDelete() {
				businessEenterpriseDelete().then(res => {
					this.$message({
						message: '新增成功',
						type: 'success'
					});
				})
			},
			//新增考核列表
			systemUserNewPost(data) {
				systemUserNew(data).then(res => {
					this.$message({
						message: res.msg,
						type: 'success'
					});
					this.dialogFormVisible = false
					this.form.enterpriseName = ''
					this.form.contacts = ''
					this.form.position = ''
					this.form.bankName = ''
					this.form.bankBranch = ''
					this.form.corporateAccount = ''
					this.systemUserListPost()
				})
			},
			//用户信息列表
			systemUserListPost() {
				systemUserList({
					page: 1,
					pageSize: 10,
					data: {}
				}).then(res => {
					// console.log("res.rows: ",res.rows);
					this.tableData = res.rows
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
.page-min{
    margin: 10px;
    background-color: #fff;
    border:1px solid #ddd;
    border-radius:4px;
    padding:10px;
}
</style>

